<template>
  <view class="scanCenter">
    <view class="scan">
      <u--input placeholder="请输入兑换码" border="surround" v-model="value"></u--input>
    </view>

    <view class="button" v-if="!showBtn" :style="{
      backgroundColor: `${value ? defaultColor : null}`,
      color: `${value ? '#FFF' : null}`,
    }" @click="toCheck">确定</view>
    <view class="button" v-else>确定</view>
  </view>
</template>

<script>
import { bindStoreCard } from "@/api/storedCard.js";
var scanCode = require("@/utils/scanCode");
export default {
  data() {
    return {
      defaultColor: uni.getStorageSync("textColor") || "#6DB12E",
      value: "",
      showBtn: false,
    };
  },
  methods: {
    change() { },
    openScan() {
      // 允许从相机和相册扫码
      if (uni.getStorageSync("token")) {
        scanCode.stateOfCharge();
      } else {
        scanCode.scanCode();
      }
    },
    async toCheck() {
      this.showBtn = true;
      const _param = {
        memberName: uni.getStorageSync("userInfo").name,
        memberMobile: uni.getStorageSync("userInfo").telephone,
        storeCardNum: this.value,
      };
      const { msg } = await bindStoreCard(_param);
      this.showBtn = false;
      uni.showToast({
        title: msg,
        icon: "none",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.scanCenter {
  width: 100%;
  min-height: 100vh;
  background: #f5f7fa;
  padding-top: 40rpx;
  box-sizing: border-box;
}

.scan {
  width: 94%;
  margin: 0rpx auto;
  height: 116rpx;
  background: linear-gradient(360deg,
      #ffffff 0%,
      #ffffff 31%,
      #f4f6f8 99%,
      #f4f6f8 100%);
  box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 2rpx solid #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  /deep/ .u-input {
    width: 85%;
    height: 100%;
    border: 0;
    padding-left: 20rpx;
    box-sizing: border-box;
  }

  /deep/ .u-icon {
    width: 15%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

.button {
  width: 92%;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  margin: 40rpx auto;
  background: #c0c4cc;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #ffffff;
}
</style>
